<template>
  <div class="search-layout">
    <!-- 搜索区域 -->
    <div class="search-section">
      <div class="kawaii-title">
        <span class="title-text">二次元世界搜索</span>
        <div class="title-decoration left"></div>
        <div class="title-decoration right"></div>
      </div>
      <div class="search-container">
        <div class="search-box">
          <div class="search-input-wrapper">
            <div class="search-icon">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="22"
                height="22"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#fe4ea4"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <circle cx="11" cy="11" r="8"></circle>
                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
              </svg>
            </div>
            <input
              type="text"
              class="search-input"
              v-model="searchKeyword"
              placeholder="请输入想要寻找的二次元内容~"
              @keyup.enter="search"
            />
            <div class="search-button" @click="search">搜索</div>
          </div>
        </div>
      </div>

      <!-- 搜索类型切换 -->
      <div class="search-type-tabs">
        <div
          v-for="tab in tabs"
          :key="tab.value"
          :class="['tab-item', { active: activeTab === tab.value }]"
          @click="switchTab(tab.value)"
        >
          <span class="tab-icon">{{ tab.icon }}</span>
          {{ tab.label }}
        </div>
      </div>
    </div>

    <!-- 搜索结果内容区域 -->
    <div class="search-content">
      <component :is="currentTabComponent" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import VideoSearch from './VideoSearch.vue'
import UserSearch from './UserSearch.vue'

const route = useRoute()
const router = useRouter()

// 搜索关键词
const searchKeyword = ref('')

// 标签页配置
const tabs = [
  { label: '视频', value: 'video', icon: '🎬' },
  { label: '用户', value: 'user', icon: '👤' },
]

// 当前活动标签
const activeTab = ref('video')

// 当前标签页组件
const currentTabComponent = computed(() => {
  return activeTab.value === 'video' ? VideoSearch : UserSearch
})

// 搜索方法
const search = () => {
  if (!searchKeyword.value.trim()) return

  // 更新路由query参数
  router.push({
    path: '/front/search',
    query: {
      keyword: searchKeyword.value.trim(),
      type: activeTab.value,
    },
  })
}

// 切换标签
const switchTab = (tabValue: string) => {
  if (activeTab.value === tabValue) return

  activeTab.value = tabValue

  // 更新路由query参数
  router.push({
    path: '/front/search',
    query: {
      keyword: searchKeyword.value.trim(),
      type: tabValue,
    },
  })
}

// 监听路由参数变化
watch(
  () => route.query,
  (query) => {
    // 设置搜索关键词
    if (query.keyword) {
      searchKeyword.value = query.keyword as string
    }

    // 设置当前标签
    if (query.type) {
      activeTab.value = query.type as string
    }
  },
  { immediate: true },
)
</script>

<style scoped lang="scss">
.search-layout {
  width: 100%;
  min-height: 100vh;
  background-color: #fff8fb;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 300px;
    background: linear-gradient(to bottom, #ffcbe3, #ffd6ff);
    opacity: 0.5;
    z-index: 0;
  }
}

// 萌系标题
.kawaii-title {
  text-align: center;
  position: relative;
  margin-bottom: 20px;
  padding-top: 15px;

  .title-text {
    font-size: 28px;
    font-weight: bold;
    color: #fe4ea4;
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 0 15px;

    &::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -5px;
      width: 100%;
      height: 8px;
      background: rgba(254, 78, 164, 0.2);
      border-radius: 4px;
      z-index: -1;
    }
  }

  .title-decoration {
    position: absolute;
    top: 50%;
    width: 40px;
    height: 8px;
    border-radius: 4px;
    background: #ffcbe3;

    &.left {
      left: calc(50% - 120px);
      transform: translateY(-50%) rotate(-30deg);
    }

    &.right {
      right: calc(50% - 120px);
      transform: translateY(-50%) rotate(30deg);
    }
  }
}

// 搜索区域样式
.search-section {
  padding: 30px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}

.search-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.search-box {
  width: 100%;
  max-width: 540px;
  padding: 0 20px;
}

.search-input-wrapper {
  display: flex;
  align-items: center;
  height: 48px;
  border: 2px solid #ffb6c1;
  border-radius: 24px;
  overflow: hidden;
  transition: all 0.3s;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 12px rgba(254, 78, 164, 0.15);

  &:focus-within {
    border-color: #fe4ea4;
    box-shadow: 0 0 0 4px rgba(254, 78, 164, 0.2);
    transform: translateY(-2px);
  }

  .search-icon {
    display: flex;
    align-items: center;
    margin-left: 16px;
    margin-right: 10px;
  }

  .search-input {
    flex: 1;
    height: 100%;
    border: none;
    outline: none;
    font-size: 16px;
    background: transparent;
    color: #7c5479;

    &::placeholder {
      color: #c9a0dc;
    }
  }

  .search-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    height: 48px;
    background: linear-gradient(135deg, #fe4ea4, #ff9fcf);
    color: white;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;

    &:hover {
      background: linear-gradient(135deg, #ff2e94, #ff8fbf);
    }
  }
}

// 搜索类型标签
.search-type-tabs {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  position: relative;

  &::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 1px;
    background: linear-gradient(to right, transparent, #fe4ea4, transparent);
  }

  .tab-item {
    padding: 8px 20px;
    font-size: 16px;
    color: #7c5479;
    margin: 0 15px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    transition: all 0.3s;

    .tab-icon {
      margin-right: 5px;
      font-size: 18px;
    }

    &:hover {
      color: #fe4ea4;
    }

    &.active {
      color: #fe4ea4;
      font-weight: 500;

      &::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 30%;
        width: 40%;
        height: 3px;
        background-color: #fe4ea4;
        border-radius: 3px;
      }
    }
  }
}

// 搜索结果区域
.search-content {
  padding: 30px 20px;
  max-width: 1280px;
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  box-shadow: 0 5px 15px rgba(254, 78, 164, 0.1);
  backdrop-filter: blur(5px);
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .kawaii-title .title-text {
    font-size: 22px;
  }

  .search-type-tabs .tab-item {
    padding: 6px 15px;
    font-size: 14px;
  }

  .search-input-wrapper {
    height: 42px;

    .search-input {
      font-size: 14px;
    }

    .search-button {
      padding: 0 18px;
      font-size: 14px;
    }
  }
}
</style>
